<template>
  <view>
    <s-layout  navbar="goods" :onShareAppMessage="shareInfo">
      <!-- 标题栏  :onShareAppMessage="shareInfo"-->
      <detailNavbar />

      <!-- 骨架屏 -->
      <detailSkeleton v-if="state.skeletonLoading" />
      <!-- 下架/售罄提醒 -->
      <s-empty
        v-else-if="state.goodsInfo === null"
        text="商品不存在或已下架"
        icon="/static/order-empty.png"
        showAction
        actionText="再逛逛"
        actionUrl="/pages/goods/list"
      />
      <block v-else>
        <view class="detail-swiper-selector">
       
		<su-swiper class="ss-m-b-14" isPreview :list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)"
		 otStyle="tag" imageMode="scaleToFill" dotCur="bg-mask-40" imgHeight="750" height="750"  :seizeHeight="750" />
         

          <!-- 价格+标题 -->
          <view class="title-card detail-card ss-p-y-40 ss-p-x-20">
            <view class="ss-flex ss-row-between ss-col-center ss-m-b-26">
              <view class="price-box ss-flex ss-col-bottom">
                <view class="price-text ss-m-r-16">
                  {{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }}
                </view>
                <view class="origin-price-text" v-if="state.goodsInfo.marketPrice > 0">
                  {{ fen2yuan(state.selectedSku.marketPrice || state.goodsInfo.marketPrice) }}
                </view>
              </view>
              <view class="sales-text">
                {{ formatSales('exact', state.goodsInfo.salesCount) }}
              </view>
            </view>
            <view class="discounts-box ss-flex ss-row-between ss-m-b-28">
              <!-- 满减送/限时折扣活动的提示 -->
              <div class="tag-content">
                <view class="tag-box ss-flex">
                  <view
                    class="tag ss-m-r-10"
                    v-for="promos in state.activityInfo"
                    :key="promos.id"
                    @tap="onActivity"
                  >
                    {{ promos.name }}
                  </view>
                </view>
              </div>

<!-- v-if="state.couponInfo.length"  // @tap="shareToWechatFriend" -->
          <!--   <view
                class="get-coupon-box ss-flex ss-col-center ss-m-l-20"
              
                
              >
			  <button
			    class="ss-reset-button add-btn ui-Shadow-Main"
			 
			 open-type="share"
			  
			  >
			    分享
			  </button>
                  <view class="discounts-title ss-m-r-8">领券</view>
                <text class="cicon-forward"></text>
              </view> -->
            </view>
            <view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.name }}</view>
            <!-- <view  class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view> -->
		
			<view class="goodMainView"> 
			
			        <view class="goodMainView_top" v-if="state.goodsInfo.skus[0].grossWeight != 0">						
						<view class="goodMainView_box" >							
							<view class="goodMainView_box_View " >
								<view> <text class="textxqClass">毛重</text></view>
								<view class="top16 ss-line-1"> <text class="letextClass" v-if="!state.goodsInfo.standardPiece">约 </text> <text class="mindtxtClass">{{state
                  .goodsInfo.skus[0].grossWeight}}</text> <text class="letextClass">斤</text></view>
							</view>
							<view class="goodMainView_line"></view>
							<view class="left8 ">							
									<view> <text class="textxqClass">毛单价</text></view>
									<view class="top16 ss-line-1"> <text class="letextClass" v-if="!state.goodsInfo.standardPiece"> 约</text><text class="mindtxtClass">
                    ￥{{fen2yuan(state.goodsInfo.skus[0].grossPrice)}}</text> <text class="letextClass">/斤</text></view>
							</view>													
					   </view>
											
						<view class="goodMainView_box left10">						
							<view class="goodMainView_box_View ">
							 	<view> <text class="textxqClass">净重</text></view>
							 	<view class="top16 ss-line-1"> <text class="letextClass" v-if="!state.goodsInfo.standardPiece">约 </text> <text class="mindtxtClass">{{ state.goodsInfo.skus[0].weight}}</text> <text class="letextClass">斤</text></view>
							 </view>
							 <view class="goodMainView_line"></view>
							<view class="left8 ">							 	
							 		<view> <text class="textxqClass ">净单价</text></view>
							 		<view class="top16 ss-line-1"> <text class="letextClass" v-if="!state.goodsInfo.standardPiece"> 约</text><text class="mindtxtClass"> ￥{{fen2yuan(state.goodsInfo.skus[0].netPrice)}}</text> <text class="letextClass">/斤</text></view>							 	
							 </view>												
						</view>	
						
							
						
					</view>
					<view class="goodMainView_top" v-else>
											<view class="goodMainView_box_spec" >							
												<view class="goodMainView_box_View " >
													<view> <text class=" textsizefont ">{{state.goodsInfo.specDetail.specTag}}</text></view>
												</view>
												<view class="goodMainView_line"></view>
												<view >							
														<view> <text class="textsizefont">{{state.goodsInfo.specDetail.specUnitTag}}</text></view>
												</view>													
										   </view>
																
											
					</view>
				<view class="shareView">
					
					
					 <button
					 class="sharebtn"
					 open-type="share">
					 
					  <!-- <image :src="sheep.$url.static('/static/img/shop/share/share_link.png')" class="shareimg"></image> -->
								<!-- <text calss="">分享</text>  -->
					</button>
				</view>		
			
			</view>
          </view>
		  
		  <!-- 功能卡片 -->
		  <view class="detail-cell-card detail-card ss-flex-col">
		    <view class="xiaqanView">
				
				<view class="xiaqanbox">产地： <text class="xiaqanboxText">   {{state.goodsInfo.originPlace}}  </text></view>
				<view class="xiaqanbox"  v-if=" state.goodsInfo.level != null"   >等级： <text class="xiaqanboxText">   {{state.goodsInfo.level}}  </text></view>
				<view v-if=" state.goodsInfo.specification != ''" class="xiaqanbox ">商品规格： <text class="xiaqanboxText">  {{state.goodsInfo.specification}}  </text></view>
				<view class="xiaqanbox">是否有售后： <text class="xiaqanboxText">  {{state.goodsInfo.hasAfterSaleService ? '有': '无' }} </text></view>

				<view v-if=" state.goodsInfo.shelfLifeInfo.maxSweetness != null && state.goodsInfo.shelfLifeInfo.maxSweetness
				 > 0" class="xiaqanbox">最大甜度： <text class="xiaqanboxText">   {{state.goodsInfo.shelfLifeInfo.maxSweetness}}  </text><text>%</text></view>
				<view v-if=" state.goodsInfo.shelfLifeInfo.minSweetness != null && state.goodsInfo.shelfLifeInfo.minSweetness
				 > 0" class="xiaqanbox">最小甜度： <text class="xiaqanboxText">   {{state.goodsInfo.shelfLifeInfo.minSweetness}}  </text><text>%</text></view>
				<view v-if=" state.goodsInfo.shelfLifeInfo.productionDate != null" class="xiaqanbox">生产日期： <text class="xiaqanboxText">   {{state.goodsInfo.shelfLifeInfo.productionDate}}  </text></view>
				<view v-if="state.goodsInfo.shelfLifeInfo.originDeliveryDate != null" class="xiaqanbox">原产地发货时间： <text class="xiaqanboxText">   {{state.goodsInfo.shelfLifeInfo.originDeliveryDate}}  </text></view>
				<view v-if="state.goodsInfo.shelfLifeInfo.marketArrivalDate != null" class="xiaqanbox">到市场时间： <text class="xiaqanboxText">   {{state.goodsInfo.shelfLifeInfo.marketArrivalDate}}  </text></view>
				<view v-if=" state.goodsInfo.shelfLifeInfo.shelfLife != '' && state.goodsInfo.shelfLifeInfo.shelfLife != null " class="xiaqanbox">{{state.goodsInfo.shelfLifeInfo.shelfLifeMode == 1 ? "货架期：":"保质期："}}  <text class="xiaqanboxText">  {{state.goodsInfo.shelfLifeInfo.shelfLife}}  </text></view>
				<view  class="xiaqanboxareaView">
					
				<view class="xiaqanbox w130">商品简介：</view>
				<view >
				<text class="xiaqanboxText ">  {{state.goodsInfo.introduction}}  </text>
				</view> 
					
				</view>
				
				
			<view v-if="state.goodsInfo.deductibleCondition != null  &&  state.goodsInfo.deductibleCondition != ''"  class="xiaqanboxareaView">
				
			<view class="xiaqanbox w130">免赔情况：</view>
			<view >
			<text class="xiaqanboxText ">  {{state.goodsInfo.deductibleCondition}}  </text>
			</view> 
				
			</view>	
				
				
				
				
				
				
				<view  class="xiaqanboxareaView" v-if="state.goodsInfo.afterSaleCondition != null  && state.goodsInfo.afterSaleCondition != ''">
					
				<view class="xiaqanbox w130">可申请售后条件：</view>
				<view >
				<text class="xiaqanboxText "> {{state.goodsInfo.afterSaleCondition}} </text>
				</view> 
					
				</view>
				
				
			</view>	
 	</view>
	
	
	<view class="detail-cell-card detail-card ss-flex-col">
		
		<view class="">
		   <qiun-data-charts 
		         type="line"
		         :opts="state.opts"
		         :chartData="state.chartData"
		         :optsWatch="false"
		         :errorShow="false"
		         :errorReload="false"
		         :animation="false"
		         :tooltipShow="false"
		         :tapLegend="false"
		         :ontap="false"
		         :onmouse="false"
		       />
			   
		  </view>
		
		
		
		
		
	</view>
          <!-- 功能卡片 -->
          <view class="detail-cell-card detail-card ss-flex-col">
            
			<view class="xiaqanView">
				
				
				
				
				
				<view  class="xiaqanboxareaView" v-if="state.goodsInfo.afterSaleStandards != null">
					
				<view class="xiaqanbox w130">售后标准：</view>
				<view >
				<text class="xiaqanboxText "> {{state.goodsInfo.afterSaleStandards}} </text>
				</view> 
					
				</view>
				
				
			</view>	
			
			
			
          </view>

          <!-- 规格与数量弹框 -->
        <!-- <s-select-sku
            :goodsInfo="state.goodsInfo"
            :show="state.showSelectSku"
            @addCart="onAddCart"
            @buy="onBuy"
            @change="onSkuChange"
            @close="state.showSelectSku = false"
          /> -->
        </view>

        <!-- 评价 -->
        <detail-comment-card v-if="false" class="detail-comment-selector" :goodsId="state.goodsId" />
        <!-- 详情 -->
        <detail-content-card
          class="detail-content-selector"
          :content="state.goodsInfo.description"
        />

        <!-- 活动跳转：拼团/秒杀/砍价活动 -->
      <!--  <detail-activity-tip
          v-if="state.activityList.length > 0"
          :activity-list="state.activityList"
        /> -->

        <!-- 详情 tabbar -->
        <detail-tabbar v-model="state.goodsInfo" v-if="!state.isDetail">
          <view class="buy-box ss-flex ss-col-center ss-p-r-20" style=" padding-top:40rpx;padding-bottom: 30rpx;" v-if="state.goodsInfo.stock > 0">
	     	<view class="buy-num-box ss-flex ss-col-center ss-row-between " style="padding-right:150rpx; ">
		
			   <uni-badge
			     class="uni-badge-left-margin"
			     :text="state.selectedSku.goods_num"
			     absolute="rightTop"
			     size="small"
			   >
			     <image  @tap="ongoCart" class="item-icon" :src="sheep.$url.static('/static/images/shopcar.png')" mode="aspectFit" />
			   </uni-badge>
			   
	     	</view>
		
            <button
              class="ss-reset-button add-btn ui-Shadow-Main"
             
			  @tap="onAddCart()"
			
            >
              加入购物车
            </button>
          <!--  <button
              class="ss-reset-button buy-btn ui-Shadow-Main"
              @tap="state.showSelectSku = true"
            >
              立即购买
            </button> -->
          </view>
          <view class="buy-box ss-flex ss-col-center ss-p-r-20" v-else>
            <button class="ss-reset-button disabled-btn" disabled> 已售罄 </button>
          </view>
        </detail-tabbar>

      </block>
    </s-layout>
  </view>
</template>

<script setup>
  import { reactive, computed } from 'vue';
  import { onLoad, onPageScroll,onShareAppMessage, onReady} from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import CouponApi from '@/sheep/api/promotion/coupon';
  import ActivityApi from '@/sheep/api/promotion/activity';
  import FavoriteApi from '@/sheep/api/product/favorite';
  import { formatSales, formatGoodsSwiper, fen2yuan } from '@/sheep/hooks/useGoods';
  import detailNavbar from './components/detail/detail-navbar.vue';
  import detailCellSku from './components/detail/detail-cell-sku.vue';
  import detailTabbar from './components/detail/detail-tabbar.vue';
  import detailSkeleton from './components/detail/detail-skeleton.vue';
  import detailCommentCard from './components/detail/detail-comment-card.vue';
  import detailContentCard from './components/detail/detail-content-card.vue';
  import detailActivityTip from './components/detail/detail-activity-tip.vue';
  import { isEmpty } from 'lodash-es';
  import SpuApi from '@/sheep/api/product/spu';
  import $store from '@/sheep/store';
  import { showAuthModal, showShareModal } from '@/sheep/hooks/useModal';
  import CartApi from '@/sheep/api/trade/cart';
  import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.min.js';
  // onPageScroll(() => {});
  var uChartsInstance = {};
  const isLogin = computed(() => sheep.$store('user').isLogin);
  const state = reactive({
	  chartData: {},
    goodsId: 0,
    skeletonLoading: true, // SPU 加载中
    goodsInfo: {}, // SPU 信息
    showSelectSku: false, // 是否展示 SKU 选择弹窗
    selectedSku: {
		goods_num:0
	}, // 选中的 SKU
    showModel: false, // 是否展示 Coupon 优惠劵的弹窗
    couponInfo: [], // 可领取的 Coupon 优惠劵的列表
    showActivityModel: false, // 【满减送/限时折扣】是否展示 Activity 营销活动的弹窗
    activityInfo: [], // 【满减送/限时折扣】可参与的 Activity 营销活动的列表 TODO 芋艿：正在接入中
    activityList: [], // 【秒杀/拼团/砍价】可参与的 Activity 营销活动的列表
	list:[],
	isDetail:false,
	opts: {
	        timing: "easeOut",
	        duration: 1000,
	        rotate: false,
	        rotateLock: false,
	        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	        padding: [15,10,0,15],
	        fontSize: 13,
	        fontColor: "#666666",
	        dataLabel: true,
	        dataPointShape: true,
	        dataPointShapeType: "solid",
	        touchMoveLimit: 60,
	        enableScroll: false,
	        enableMarkLine: false,
	        legend: {
	          show: true,
	          position: "bottom",
	          float: "center",
	          padding: 5,
	          margin: 5,
	          backgroundColor: "rgba(0,0,0,0)",
	          borderColor: "rgba(0,0,0,0)",
	          borderWidth: 0,
	          fontSize: 13,
	          fontColor: "#666666",
	          lineHeight: 11,
	          hiddenColor: "#CECECE",
	          itemGap: 10
	        },
	  xAxis: {
	          disableGrid: true,
	          disabled: false,
	          axisLine: true,
	          axisLineColor: "#CCCCCC",
	          calibration: false,
	          fontColor: "#666666",
	          fontSize: 13,
	          lineHeight: 20,
	          marginTop: 0,
	          rotateLabel: false,
	          rotateAngle: 45,
	          itemCount: 5,
	          boundaryGap: "center",
	          splitNumber: 5,
	          gridColor: "#CCCCCC",
	          gridType: "solid",
	          dashLength: 4,
	          gridEval: 1,
	          scrollShow: false,
	          scrollAlign: "left",
	          scrollColor: "#A6A6A6",
	          scrollBackgroundColor: "#EFEBEF",
	          title: "",
	          titleFontSize: 13,
	          titleOffsetY: 0,
	          titleOffsetX: 0,
	          titleFontColor: "#666666",
	          format: ""
	        },
	        yAxis: {
	          gridType: "dash",
	          dashLength: 2,
	          disabled: false,
	          disableGrid: false,
	          splitNumber: 5,
	          gridColor: "#CCCCCC",
	          padding: 10,
	          showTitle: true,
	          data: []
	        },
	        extra: {
	          line: {
	            type: "straight",
	            width: 2,
	            activeType: "hollow",
	            linearType: "none",
	            onShadow: false,
	            animation: "vertical"
	          },
	          tooltip: {
	            showBox: true,
	            showArrow: true,
	            showCategory: false,
	            borderWidth: 0,
	            borderRadius: 0,
	            borderColor: "#000000",
	            borderOpacity: 0.7,
	            bgColor: "#000000",
	            bgOpacity: 0.7,
	            gridType: "solid",
	            dashLength: 4,
	            gridColor: "#CCCCCC",
	            boxPadding: 3,
	            fontSize: 13,
	            lineHeight: 20,
	            fontColor: "#FFFFFF",
	            legendShow: true,
	            legendShape: "auto",
	            splitLine: true,
	            horizentalLine: false,
	            xAxisLabel: false,
	            yAxisLabel: false,
	            labelBgColor: "#FFFFFF",
	            labelBgOpacity: 0.7,
	            labelFontColor: "#666666"
	          },
	          markLine: {
	            type: "solid",
	            dashLength: 4,
	            data: []
	          }
	        }
	      }
  });

  // 规格变更
  function onSkuChange(e) {
    state.selectedSku = e;
  }
  function drawCharts(id,data){
       const ctx = uni.createCanvasContext(id, this);
       uChartsInstance[id] = new uCharts({
         type: "line",
         context: ctx,
         width: uni.upx2px(750),
         height: uni.upx2px(500),
         categories: data.categories,
         series: data.series,
         animation: true,
         timing: "easeOut",
         duration: 1000,
         rotate: false,
         rotateLock: false,
         background: "#FFFFFF",
         color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
         padding: [15,10,0,15],
         fontSize: 13,
         fontColor: "#666666",
         dataLabel: true,
         dataPointShape: true,
         dataPointShapeType: "solid",
         touchMoveLimit: 60,
         enableScroll: false,
         enableMarkLine: false,
         legend: {
           show: true,
           position: "bottom",
           float: "center",
           padding: 5,
           margin: 5,
           backgroundColor: "rgba(0,0,0,0)",
           borderColor: "rgba(0,0,0,0)",
           borderWidth: 0,
           fontSize: 13,
           fontColor: "#666666",
           lineHeight: 11,
           hiddenColor: "#CECECE",
           itemGap: 10
         },
         xAxis: {
           disableGrid: true,
           disabled: false,
           axisLine: true,
           axisLineColor: "#CCCCCC",
           calibration: false,
           fontColor: "#666666",
           fontSize: 13,
           lineHeight: 20,
           marginTop: 0,
           rotateLabel: false,
           rotateAngle: 45,
           itemCount: 5,
           boundaryGap: "center",
           splitNumber: 5,
           gridColor: "#CCCCCC",
           gridType: "solid",
           dashLength: 4,
           gridEval: 1,
           scrollShow: false,
           scrollAlign: "left",
           scrollColor: "#A6A6A6",
           scrollBackgroundColor: "#EFEBEF",
           title: "",
           titleFontSize: 13,
           titleOffsetY: 0,
           titleOffsetX: 0,
           titleFontColor: "#666666",
           formatter: ""
         },
         yAxis: {
           gridType: "dash",
           dashLength: 2,
           disabled: false,
           disableGrid: false,
           splitNumber: 5,
           gridColor: "#CCCCCC",
           padding: 10,
           showTitle: false,
           data: []
         },
         extra: {
           line: {
             type: "straight",
             width: 2,
             activeType: "hollow",
             linearType: "none",
             onShadow: false,
             animation: "vertical"
           },
           tooltip: {
             showBox: true,
             showArrow: true,
             showCategory: false,
             borderWidth: 0,
             borderRadius: 0,
             borderColor: "#000000",
             borderOpacity: 0.7,
             bgColor: "#000000",
             bgOpacity: 0.7,
             gridType: "solid",
             dashLength: 4,
             gridColor: "#CCCCCC",
             boxPadding: 3,
             fontSize: 13,
             lineHeight: 20,
             fontColor: "#FFFFFF",
             legendShow: true,
             legendShape: "auto",
             splitLine: true,
             horizentalLine: false,
             xAxisLabel: false,
             yAxisLabel: false,
             labelBgColor: "#FFFFFF",
             labelBgOpacity: 0.7,
             labelFontColor: "#666666"
           },
           markLine: {
             type: "solid",
             dashLength: 4,
             data: []
           }
         }
       });
     }
  // 添加购物车
  async function onAddCart(e) {
	  
  
	  if (!$store('user').isLogin) {
	  	  
	    showAuthModal();
	    return;
	  }
	  
	  if(state.selectedSku.goods_num==0){
		  
		  state.selectedSku.goods_num = state.goodsInfo.skus[0].purchaseMinimum
	  }else{
		  
		  state.selectedSku.goods_num ++
		  
	  }
	  
	  const { data, code } = await CartApi.addCart({
	    skuId: state.selectedSku.id,
	    count: state.selectedSku.goods_num,
	  });
	  // 刷新购物车列表
	  if (code === 0) {
		state.selectedSku.goods_num = data
		
	    sheep.$store('cart').getList();	
	  }
   
  }
  
  function ongoCart(e){
	  
	  
      sheep.$router.go('/pages/index/cart');
	  
	  
  }
  // 输入框改变数量
  function onNumberChange(e) {
    if (e === 0) return;
    if (state.selectedSku.goods_num === e) return;
    state.selectedSku.goods_num = e;
  }
  

  // 立即购买
  function onBuy(e) {
	  
	  
    if (!state.selectedSku.id) {
      sheep.$helper.toast('请选择商品规格');
      return;
    }
	

      // console.log("nihao")
    sheep.$router.go('/pages/order/confirm', {
      data: JSON.stringify({
        items: [
          {
            skuId: e.id,
            count: e.goods_num,
            categoryId: state.goodsInfo.categoryId,
          },
        ],
      }),
    });
	
  }

  // 营销活动
  function onActivity() {
    state.showActivityModel = true;
  }


  // 立即领取
  async function onGet(id) {
    const { code } = await CouponApi.takeCoupon(id);
    if (code !== 0) {
      return;
    }
    uni.showToast({
      title: '领取成功',
    });
    setTimeout(() => {
      getCoupon();
    }, 1000);
  }


  const shareInfo = computed(() => {
	  
	  
	  
    if (isEmpty(state.goodsInfo)) return {};
	
	return {
		
		'title': state.goodsInfo.name +"-" +fen2yuan(state.goodsInfo.skus[0].price)+'元/件' ,
		'image': state.goodsInfo.picUrl,
		 'desc': state.goodsInfo.introduction,
		 'page': 'pages/goods/index?id=' + state.goodsInfo.id,
		
		
	}
	
  });
  
  
   onShareAppMessage(() => {
  	  
  	  // console.log("冯小刚")
  	
     return {
            'title': state.goodsInfo.name +"-" +fen2yuan(state.goodsInfo.skus[0].price)+'元/件' ,
      		'image': state.goodsInfo.picUrl,
      		 'desc': state.goodsInfo.introduction,
      		 'page': 'pages/goods/index?id=' + state.goodsInfo.id,
     };
   });
  
  
  async function getCoupon() {
    const { code, data } = await CouponApi.getCouponTemplateList(state.goodsId, 2, 10);
    if (code === 0) {
      state.couponInfo = data;
    }
  };
  
  async function   getCarnumber(id){
		//请求购物车数量
		// console.log(id)
		const { data, code } = await CartApi.getCarnumber(id);
		
		if (code === 0) {	
          	state.selectedSku.goods_num = data  
		}
	}
	
  onReady((options) => {

	console.log("ready")
	getServerData()
 
 });
 
 
 function getServerData() {
      
     };
	 
onLoad((options) => {
    // 非法参数
	
    if (!options.id) {
      state.goodsInfo = null;
      return;
    }
    state.goodsId = options.id;
    // 1. 加载商品信息
    SpuApi.getSpuDetail(state.goodsId).then((res) => {
      // 未找到商品
      if (res.code !== 0 || !res.data) {
        state.goodsInfo = null;
        return;
      }
      // 加载到商品
      state.skeletonLoading = false;
      state.goodsInfo = res.data;
	  state.selectedSku = {
	  		    id:state.goodsInfo.skus[0].id,
	  			
	  }
	  
	  console.log(res.data)
	   state.chartData = JSON.parse(JSON.stringify(res.data.skus[0].skuPriceTrend));
	   state.opts.yAxis.data=[res.data.skus[0].skuPriceTrend.yaxis]
	   
	   // console.log(res.data.skus[0].skuPriceTrend.yaxis)
	 
	   
     drawCharts('cVKMftUWJSZiDxHFeMWjTJzlXeyxUyhQ', state.chartData)
	 
	 
	 
	       
	  if ($store('user').isLogin) {
	  	  
	     getCarnumber(state.goodsInfo.skus[0].id)
	   
	  }
	 
	 
	  
      // 加载是否收藏
      if (isLogin.value) {
        FavoriteApi.isFavoriteExists(state.goodsId, 'goods').then((res) => {
          if (res.code !== 0) {
            return;
          }
          state.goodsInfo.favorite = res.data;
        });
      }
	  
    });
	
	
    // 2. 加载优惠劵信息
    getCoupon();

    // 3. 获得单个商品，进行中的拼团、秒杀、砍价活动信息
    ActivityApi.getActivityListBySpuId(state.goodsId).then((res) => {
      if (res.code !== 0) {
        return;
      }
      state.activityList = res.data;
    });
	
  });
  
</script>

<style lang="scss" scoped>
	
 .charts{
    width: 750rpx;
    height: 500rpx;
  }
  .detail-card {
    background-color: #ffff;
    margin: 14rpx 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
  }

  // 价格标题卡片
  .title-card {
    .price-box {
      .price-text {
        font-size: 42rpx;
        font-weight: 500;
        color: #ff3000;
        line-height: 30rpx;
        font-family: OPPOSANS;

        &::before {
          content: '￥';
          font-size: 30rpx;
        }
      }

      .origin-price-text {
        font-size: 26rpx;
        font-weight: 400;
        text-decoration: line-through;
        color: $gray-c;
        font-family: OPPOSANS;

        &::before {
          content: '￥';
        }
      }
    }

    .sales-text {
      font-size: 26rpx;
      font-weight: 500;
      color: $gray-c;
    }

    .discounts-box {
      .tag-content {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
      }

      .tag-box {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .tag {
        flex-shrink: 0;
        padding: 4rpx 10rpx;
        font-size: 24rpx;
        font-weight: 500;
        border-radius: 4rpx;
        color: var(--ui-BG-Main);
        background: var(--ui-BG-Main-tag);
      }

      .discounts-title {
        font-size: 24rpx;
        font-weight: 500;
        color: var(--ui-BG-Main);
        line-height: normal;
      }

      .cicon-forward {
        color: var(--ui-BG-Main);
        font-size: 24rpx;
        line-height: normal;
        margin-top: 4rpx;
      }
    }

    .title-text {
      font-size: 30rpx;
      font-weight: bold;
      line-height: 42rpx;
    }

    .subtitle-text {
      font-size: 26rpx;
      font-weight: 400;
      color: $dark-9;
      line-height: 42rpx;
    }
  }

  // 购买
  .buy-box {
    .add-btn {
      width: 428rpx;
      height: 72rpx;
      font-weight: 500;
      font-size: 28rpx;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
	   background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
	   color: $white;
      // background-color: var(--ui-BG-Main-light);
      // color: var(--ui-BG-Main);
    }

    // .buy-btn {
    //   width: 214rpx;
    //   height: 72rpx;
    //   font-weight: 500;
    //   font-size: 28rpx;

    //   border-radius: 0 40rpx 40rpx 0;
    //   background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    //   color: $white;
    // }

    .disabled-btn {
      width: 428rpx;
      height: 72rpx;
      border-radius: 40rpx;
      background: #999999;
      color: $white;
    }
  }

  .model-box {
    height: 60vh;

    .model-content {
      height: 56vh;
    }

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
    }

    .subtitle {
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;
    }
  }
  
  .goodMainView {
	  display: flex;
	  align-items: center;
	 // justify-content: space-around;
	 justify-content: space-between;
	  margin-top: 20rpx;
  }
  .shareView{
  	flex: 0 0 15%; /* 设置占比 */
	display: flex;
	align-items: center;
  	justify-content: center;
  }
  .goodMainView_top {
	  display: flex;
	  
	  &:nth-child(2) {
	     margin-left: 10rpx;
	  }

	    justify-content: space-between; /* 改动：确保毛重和净重框间距一致 */
	    width: 87%; /* 改动：设置内容部分占用85%的宽度 */

  }
  
  .left10 {
	  
	 margin-left: 15rpx;
  }

  .goodMainView_box {
  	  display: flex;
	  align-items: center;
	  justify-content: space-between;
  	  background-color: #F2F5F7;
  	  border-radius: 8rpx;
	  padding-left: 10rpx;
	   padding-right: 4rpx;
  	  height: 116rpx;
	  padding:0 20rpx;
	  width: 49%;
  	 
  }
  
  .goodMainView_box_spec{
  	  display: flex;
  	  align-items: center;
  	  justify-content: space-around;
  	  background-color: #F2F5F7;
  	  border-radius: 8rpx;
  	  padding-left: 10rpx;
  	   padding-right: 4rpx;
  	  height: 116rpx;
  	  padding:0 20rpx;
  	  width: 49%;
  	 
  }
  
  .textsizefont {
	  font-size: 30rpx;
	  color:#5E5E61;
  }
  .goodMainView_line {
	  
	  height: 76rpx;
	  background-color: #E0E0E1;
	  width: 1rpx;
  }
  .textxqClass{
	  
	  font-size: 22rpx;
	  color:#5E5E61;
  }
  .letextClass {
	  
	  font-size: 22rpx;
	  color: #18181A;
	  
  }
  .mindtxtClass{
	  font-size: 22rpx;
	  font-weight: 900;
	  color:#14B318 ;
  }
  .goodMainView_box_View{
	  padding-right: 8rpx;
  }
  .top16 {
	  margin-top: 16rpx;
	  justify-content: flex-start; /* 内容靠左对齐 */
  }
  .left8{
	  
	  padding-left: 8rpx;
  }
  .xiaqanView{
	  
	  padding: 10rpx 24rpx 24rpx 24rpx;
	  
	  
  }
  .xiaqanbox{
	  margin-top: 26rpx;
	  color: #5E5E61;
	  font-size: 26rpx;
	
	  line-height: 34rpx;	  
  }
  
  .texbf {
	  color: #5E5E61;
	  font-size: 20rpx;
	  
  }
  .xiaqanboxText{
  	  color: #18181A;
  	  font-size: 26rpx;
  	  line-height: 34rpx;	  
	  font-weight: 900;
  }
  .xiaqanboxareaView {
	  
	  display: flex;
	  margin-top: 26rpx;
	  // justify-content: space-between;
	  
	  // align-items: center;
  }
  .w130{
	    
		min-width: 136rpx;
		  margin-top: 0rpx;
		// height: 34rpx;
		// background-color: yellow;
  }
  
  	.uni-badge-left-margin {
  		margin-left: 10px;
  	}

	.item-icon{
		
			width: 58rpx;
			height: 58rpx;
	}
	
	
	
 button::after{
  border: none;
}
	
	.sharebtn {
	  width: 80rpx; /* 缩小按钮宽度，确保不会溢出 */
	    height: 80rpx; /* 同时调整高度 */
	    background: none;
	    border: none !important;
	    background-image: url('https://oss.yyjcpt.com/static/img/shop/share/share.jpg');
	    background-size: cover; /* 确保图片覆盖整个按钮 */
	    background-position: center; /* 图片居中 */
	    background-repeat: no-repeat; /* 不重复图片 */
	    cursor: pointer; /* 鼠标为手型 */
	}
	
	// .shareimg{
	// 	width: 120rpx;
	// 	height: 120rpx;
		
	// }
	// .swipView {
		
	// 	width: 100%;
	// 	height: 200rpx;
	// }
	
	// .swipView_tp {
	// 	width: 100%;
	// 	height: 200rpx;
		
	// }
</style>
